@import "../DesIcon/DesIcon";
@mixin timeline(
  $description-width: 166px,
  $dot-color: #008ed6,
  $text-time: #919191,
  $text-tag: #212121,
  $text-key: #008ed6,
  $split-grey: #dddfe2
){
  flex: 1;
  background-position: $description-width left;
  overflow: hidden;
  padding: 10px 0 20px;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 166px;
    background: #dddfe2;
    height: 100%;
    width: 1px;
    z-index: 1;
  }  
  dl{
    margin: 30px 0 0;
    display: flex;
    position: relative;
    z-index: 2;
    .description{
      width: $description-width;
      padding:4px 28px 0 0;
      box-sizing: border-box;
      text-align: right;
    }
    .time{
      color: $text-time;
      line-height: 24px;
    }
    .tag{
      line-height: 24px;
      color: $text-tag;
    }
    .content{
      flex: 1;
      display: block;
      padding-left: 24px;
      position: relative;
      &::before{
        content: ' ';
        display: block;
        position: absolute;
        top: 5px;
        left: 0;
        transform: translate3d(-50%, 100%, 0);
        width: 8px;
        height: 8px;
        background-color: $split-grey;
        border-radius: 50%
      }
      .timeline-content-detail-enter {
        opacity: 0.01;
      }

      .timeline-content-detail-enter.timeline-content-detail-enter-active {
        opacity: 1;
        transition: opacity 500ms ease-in;
      }

      .timeline-content-detail-leave {
        opacity: 1;
      }

      .timeline-content-detail-leave.timeline-content-detail-leave-active {
        opacity: 0.01;
        transition: opacity 300ms ease-in;
      }
    }
    .title{
      font-size: 16px;
      line-height: 32px;
      color: $text-tag;
      padding-right: 20px;
    }
    .key{
      color: $text-key;
    }
    .switch{
      position: relative;
      transform: rotate(180deg);
      top: -1px;
      transition: transform ease-in-out .5s;
      cursor: pointer;
      user-select:none;
    }
    .show{
      transform: rotate(0deg);
    }
  }
  .new{
    .content{
      &::before{
        background-color: $dot-color;
      }
    }
  }
  dd{
    .detail{
      margin-top: 22px;
      transition: height .5s ease-in;
    }
  }
}
